<!-- 支付方式明细报表 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      @handleChange="handleSearchChange"
      :isCheckbox="true"
      :isNeedTree="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('REPORT:PAY_MODE:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
            <a
              class="ake_btn ake_btn_text"
              @click.prevent="reBuild()"
              v-if="isPermmited('REPORT:PAY_MODE:REBUILD')"
            >重新生成</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop&&scope.$index!==0">{{ scope.$index }}</span>
                <span v-else-if="'reno' == props.prop&&scope.$index==0">合计</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              v-if="searchList[0].value=='day'"
              :fixed="props.fixed"
              :label="props.label"
              min-width="60"
              width="80"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-info"
                  title="查看详情"
                  class="ake-icon-font ake_btn_text"
                  v-if="isPermmited('REPORT:PAY_MODE:LIST')"
                  @click="showChargeWater('chargeWaterModal', scope.row.statDateDisplay, scope.row.payModeByte, scope.row.parkId)"
                  :disabled="scope.$index==0"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <!-- 查看详情 modal       -->
    <basic-modal ref="chargeWaterModal" static="true" width="1000">
      <h3 slot="title">收费流水明细</h3>
      <div class="ModalBody tmpdetailCSS" slot="modal-body">
        <chargeWater :setData="detailSetData"></chargeWater>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('chargeWaterModal')">关闭</button>
      </div>
    </basic-modal>

    <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// 引进预订订单流水的组件
import chargeWater from "../operation/charge_water.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import pay_mode from "./js/pay_mode.js";
import ReBuildBtn from "@components/reBuildBtn/index.vue";
export default {
  name: "payMode",
  mixins: [common, stardardList, invokeModal, images, pay_mode],
  components: {
    BigPicModal,
    chargeWater,
    ReBuildBtn
  },
  data() {
    var today = [
      new Date(
        moment()
          .subtract("days", 1)
          .format("YYYY-MM-DD 00:00:00")
      ),
      new Date(
        moment()
          .subtract("days", 1)
          .format("YYYY-MM-DD 23:59:59")
      )
    ]; //昨天
    return {
      reqUrl: "/report/payMode/reStatReport.do",
      timeDimensionList: [
        { name: "日报", value: "date" },
        { name: "月报", value: "month" }
      ],
      fixedCols: 4,
      total: 0,
      paramName: "parkIds",
      detailSetData: {
        fixedCols: 1,
        isShowTableHead: false,
        isShowTree: false,
        searchList: []
      },
      searchList: [
        {
          index: 0,
          type: "select",
          isShow: false,
          name: "reportDimension",
          text: "时间维度",
          value: "day",
          isHandleChange: true,
          options: [
            { name: "日报", value: "day" },
            { name: "月报", value: "month" },
            { name: "年报", value: "year" },
            { name: "自定义", value: "custom" }
          ]
        },
        {
          index: 1,
          format: "yyyy-MM-dd",
          type: "datePicker",
          pickerType: "daterange",
          isShow: false,
          name: "dateFromTo",
          text: "时间区间",
          propName: "statDateFromStr,statDateToStr",
          value: today,
          style: { width: "360px" }
        },
        {
          index: 2,
          isShow: false,
          type: "select",
          name: "query_payMode",
          text: "支付方式",
          value: "",
          options: [
            { name: "--全部--", value: "" },
            { name: "未定义", value: "0" },
            { name: "现金", value: "1" },
            { name: "自发卡", value: "2" },
            { name: "次数", value: "3" },
            { name: "微信支付", value: "4" },
            { name: "支付宝支付", value: "5" },
            { name: "银联闪付", value: "6" },
            { name: "交通卡", value: "7" },
            { name: "免费", value: "8" },
            { name: "余额账户", value: "9" },
            { name: "银联接触卡", value: "10" },
            { name: "银联网络支付", value: "11" },
            { name: "第三方余额", value: "12" },
            { name: "NFC", value: "13" },
            { name: "普通储蓄卡", value: "14" },
            { name: "信用卡", value: "15" },
            // { name: '微信免密', value: '16' },
            // { name: '支付宝免密', value: '17' },
            { name: "腾讯无感支付", value: "18" },
            { name: "ETC", value: "19" },
            { name: "手动转账", value: "20" },
            { name: "微信无感支付", value: "21" },
            { name: "支付宝无感支付", value: "22" },
            { name: "银联无感支付", value: "23" }
          ]
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "statDateDisplay",
          text: "日期",
          sortable: true
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          sortable: true,
          minWidth: 60
        },
        {
          index: 3,
          isShow: false,
          prop: "payModeStr",
          text: "支付方式",
          sortable: true
        },
        {
          index: 4,
          isShow: false,
          prop: "payCount",
          text: "支付次数",
          sortable: true
        },
        {
          index: 5,
          isShow: false,
          prop: "payTotal",
          text: "支付金额总数",
          sortable: true
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.ModalBody {
  padding: 20px 35px;
  .HeadMSG {
    display: flex;
    margin-bottom: 10px;
    li:first-child {
      margin-right: 20px;
    }
  }
}

.tmpdetailCSS {
  max-height: 518px;
  overflow: auto;
  .common-body-wrapper {
    position: relative;
  }
}
</style>